<!-- Horizontal Form -->
 <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加菜单</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form class="form-horizontal">
        <div class="box-body">
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">类型</label>
            <div class="col-sm-10 typeRadio">
              	<label class="radio-inline">
				<input type="radio" name="typeId" value="1" checked> 菜单 </label>
				<label class="radio-inline">
				<input type="radio" name="typeId" value="2"> 按钮 </label>
            </div>
          </div>
          <div class="form-group">
            <label for="nameId" class="col-sm-2 control-label">菜单名称</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="nameId" placeholder="名称">
            </div>
          </div>
          <div class="form-group">
            <label for="parentId" class="col-sm-2 control-label">上级菜单</label>
            <div class="col-sm-10">
              <input type="text" class="form-control load-sys-menu" readonly="readonly" id="parentId" placeholder="上级菜单">
            </div>
          </div>
          <div class="form-group">
            <label for="urlId" class="col-sm-2 control-label">菜单URL</label>
            <div class="col-sm-10">
              <input type="text" class="form-control"  id="urlId" placeholder="url">
            </div>
          </div>
          <div class="form-group">
			<label for="permissionId" class="col-sm-2 control-label">授权标识：</label>
			<div class="col-sm-10">
				<input type="text" id="permissionId"
				       placeholder="多个用逗号分隔，如：user:list,user:create"
					   class="form-control">
			</div>
		  </div>
		  <div class="form-group">
				<label for="sortId" class="col-sm-2 control-label">排序号：</label>
				<div class="col-sm-10">
					<input type="text" id="sortId" placeholder="排序号"
						class="form-control">
				</div>
		 </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <button type="button" class="btn btn-default btn-cancel">Cancel</button>
          <button type="button" class="btn btn-info pull-right btn-save">Save</button>
        </div>
        <!-- /.box-footer -->
      </form>
      <!-- zTree 对应的div -->
      <div class="layui-layer layui-layer-page layui-layer-molv layer-anim" id="menuLayer" type="page" times="2" showtime="0" contype="object"
		style="z-index:59891016; width: 300px; height: 450px; top: 100px; left: 500px; display:none">
		<div class="layui-layer-title" style="cursor: move;">选择菜单</div>
		<div class="layui-layer-content" style="height: 358px;">
			<div style="padding: 10px;" class="layui-layer-wrap">
				<ul id="menuTree" class="ztree"></ul>    <!-- 动态加载树 -->
			</div>
		</div>
		<span class="layui-layer-setwin"> <a class="layui-layer-ico layui-layer-close layui-layer-close1 btn-cancel" ></a></span>
		<div class="layui-layer-btn layui-layer-btn-">
			<a class="layui-layer-btn0 btn-confirm">确定</a>
			<a class="layui-layer-btn1 btn-cancel">取消</a>
	     </div>
      </div>
  </div>
  <script type="text/javascript" src="bower_components/ztree/jquery.ztree.all.min.js"></script>
  <script type="text/javascript" src="bower_components/layer/layer.js">
  </script>
  <script type="text/javascript">
  var zTree; //zTree是第三方扩展的一个Jquery插件
  //初始化zTree时会用到
  var setting = {
  	data : {
  		simpleData : {
  			enable : true,
  			idKey : "id",  //节点数据中保存唯一标识的属性名称
  			pIdKey : "parentId",  //节点数据中保存其父节点唯一标识的属性名称
  			rootPId : null  //根节点id
  		}//json 格式javascript对象
  	}
  }//json 格式的javascript对象
  
  $(function(){
	  //加载菜单树的事件注册
	  $(".form-group")
	  .on("click",".load-sys-menu",
			  doLoadZtreeNodes);
	  //box-footer中按钮事件注册
	  
	  $(".box-footer")
	  .on("click",".btn-cancel",doCancel)
	  .on("click",".btn-save,.btn-update",doSaveOrUpdate)
	  
	  //menuLayer中按钮事件注册
	  $("#menuLayer")
	  .on("click",".btn-confirm",doSetSelectedNode)
	  .on("click",".btn-cancel",doHideZtree);
	  //获取mainContentId上值
	  var rowData=
	  $("#mainContentId").data("rowData");
	  //假如有值说明是修改,则基于此值初始化编辑页面.
	  if(rowData)doInitEditFormData(rowData);
  });
  //初始化表单数据
  function doInitEditFormData(rowData){
	$("input[value="+rowData.type+"]").prop("checked",true);
	$("#nameId").val(rowData.name);  
	$("#sortId").val(rowData.sort);  
	$("#permissionId").val(rowData.permission);  
	$("#urlId").val(rowData.url);  
	$("#parentId").val(rowData.parentName);  
	$("#parentId").data("parentId",rowData.parentId);
  }
  //回到列表页面
  function doCancel(){
	var url="menu/menu_list";
	$("#mainContentId").load(url);  
  }
  //将表单数据发送到服务端
  function doSaveOrUpdate(){
	 debugger
	 //1.获取表单中用户输入数据
	 var params=doGetEditFormData();
	 var rowData=$("#mainContentId").data("rowData");
	 if(rowData)params.id=rowData.id;
	 //2.异步提交数据到服务端
	 var insertUrl="menu/doSaveObject";
	 var updateUrl="menu/doUpdateObject";
	 var url=rowData?updateUrl:insertUrl;
	 
	 $.post(url,params,function(result){
		 if(result.state==1){
			 alert(result.message);
			 doCancel();
		 }else{
			 alert(result.message);
		 }
	 })
  }
  function doGetEditFormData(){
	  var params={
	     "type":$("input[name='typeId']:checked").val(),
	     "name":$("#nameId").val(),
	     "parentId":$("#parentId").data("parentId"),
	     "url":$("#urlId").val(),
	     "sort":$("#sortId").val(),
	     "permission":$("#permissionId").val()
	  }
	  return params;
  }
  
  
  
  
  
  
  //设置选中节点(上级菜单)
  function doSetSelectedNode(){
	  console.log(zTree);
	  //1.获取选中节点
	  var nodes=zTree.getSelectedNodes();
	  if(!nodes||nodes.length==0){
		  doHideZtree();
		  return;
	  }
	  //2.将选中节点内容填充到页面
	  $("#parentId").data("parentId",nodes[0].id);
	  $("#parentId").val(nodes[0].name);
	  //3.隐藏zTree
	  doHideZtree();
  }
  //隐藏zTree
  function doHideZtree(){
	  $("#menuLayer").css("display","none");
  }
  //加载zTree菜单
  function doLoadZtreeNodes(){
	 //1.url
	 var url="menu/doFindZtreeMenuNodes";
	 //2.request
	 $.getJSON(url,function(result){//JsonResult
		 console.log(result);
		 if(result.state==1){
			//zTree数据的初始化
			zTree=$.fn.zTree.init(
					$("#menuTree"),
					 setting,
					 result.data);
			$("#menuLayer").css("display","block");
		 }else{
			alert(result.message);
		 }
	 });
	  
  }
  
  
  
  
  
  
  
  
  
  
  

 </script>
    
    
    
    
    
    
    
    
    